<template>
  <div>
    <div class="security-view">
      <div class="main-container">
        <div class="security-box">
          <el-row>
            <el-col :offset="12" :span="12">
              <div class="progress-text">安全指數:</div>
              <el-progress :text-inside="true" :stroke-width="16" :percentage="60"></el-progress>
            </el-col>
          </el-row>
          <div class="security-item">
            <h3 class="item-title">帳戶密碼</h3>
            <div class="item-operation">
              <router-link to="/main/security">密碼變更</router-link>
            </div>
            <i class="item-status el-icon-success"></i>
          </div>
          <div class="security-item">
            <h3 class="item-title">雙層驗證</h3>
            <div class="item-text">您目前還沒有啟動任何雙層驗證。</div>
            <div class="item-operation">
              <router-link to="/main/security">啟動簡訊驗證</router-link>
              <router-link to="/main/security">啟動身分驗證器</router-link>
            </div>
            <i class="item-status el-icon-error"></i>
          </div>
          <div class="security-item">
            <h3 class="item-title">安全問題保護</h3>
            <div class="item-text">當您遺失身分驗證器金鑰、或當您未來更換手機的時候，可以透過回答安全問題來重置設定。</div>
            <div class="item-operation">
              <router-link to="/main/security">啟用安全問題保護</router-link>
            </div>
            <i class="item-status el-icon-warning"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .security-view{
    .security-box{
      .progress-text{
        margin: 2px 0;
        font-size: 13px;
        font-weight: bold;
        float: right;
      }
      .security-item{
        position: relative;
        border-bottom: 1px dashed #ccc;
        padding: 30px 30px 30px 0;
        &:last-child{
          border-bottom: none;
        }
        .item-title{
          margin-bottom: 20px;
          color: #999;
          font-size: 18px;
          font-weight: 400;
        }
        .item-status{
          font-size: 18px;
          position: absolute;
          right: 0;
          top: 50%;
          margin-top: -9px;
          &.el-icon-info{color: #409EFF;}
          &.el-icon-success{color: #67C23A;}
          &.el-icon-warning{color: #E6A23C;}
          &.el-icon-error{color: #F56C6C;}
          &.el-icon-question{color: #909399;}
        }
        .item-text{
          margin-top: 8px;
        }
        .item-operation{
          margin-top: 8px;
          a{
            margin-right: 10px;
            color: #38B;
            font-size: 14px;
            &:last-child{
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
